<script setup>
import {ref, onMounted} from 'vue'

const option1 = ref([
  {
    text: '综合',
    value: 1,
  },
  {
    text: '距离优先',
    value: 2,
  },
  {
    text: '价格优先',
    value: 3,
  }
])
const option2 = ref([
  {
    text: '分类',
    value: 1,
  },
  {
    text: '距离优先',
    value: 2,
  },
  {
    text: '价格优先',
    value: 3,
  }
])
const option3 = ref([
  {
    text: '筛选',
    value: 1,
  },
  {
    text: '距离优先',
    value: 2,
  },
  {
    text: '价格优先',
    value: 3,
  }
])
const value1 = ref(1)
const value2 = ref(1)
const value3 = ref(1)
const data = ref('')
onMounted(async () => {
  data.value = (await uni.request({url: 'http://localhost:3000/publish'}))['data']
})
const navigateTo = TaskID => {
  uni.navigateTo({
    url: `/pages/index/module/taskInfo?taskId=${TaskID}`
  })
}

</script>

<template>
  <view class="Task">
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1"/>
      <van-dropdown-item v-model="value2" :options="option2"/>
      <van-dropdown-item v-model="value3" :options="option3"/>
    </van-dropdown-menu>
    <!--    <u-dropdown style="margin-bottom: 10px" class="u-dropdown">
          <u-dropdown-item title="综合" v-model="value1"  :options="options">

          </u-dropdown-item>
          <u-dropdown-item title="分类"></u-dropdown-item>
          <u-dropdown-item title="筛选"></u-dropdown-item>
        </u-dropdown>-->
    <view v-for="(task, i) in data" :key="i" class="task" @click="navigateTo(task.TaskID)">
      <view class="price" style="color: #ff2e2e; display: flex; justify-content: space-between">
        <div>￥{{ task.Reward }}</div>
        <div style="width: 100px; outline: 1px solid red; text-align: center; border-radius: 5px">置顶推广</div>
      </view>
      <view class="title" style="margin-top: 10px">
        {{ task.Title }}
      </view>
      <view class="info" style="color: #666">2天20小时后投稿截止</view>
    </view>
  </view>
</template>

<style scoped>
.Task {
  width: 100%;
  height: calc(100vh - 160px);
}

.Task > .task {
  width: 100%;
  height: 180px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: white;
  border-radius: 10px;
  padding: 10px;
}

.Task > .task > .price {
  width: 100%;
  height: 25px;
}

</style>